<template>
  <div>
    <div class="status_title">
      {{orderDetail.statusText}}
    </div>
    <div class="section">
      <div v-if="orderDetail.logicId == 0">
        <div style="font-weight: bold; color: black;">{{ topTitle }}</div>
      </div>
      <div v-else>
        <div style="font-weight: bold; color: black;">{{ topTitle }}</div>
        <div>{{ address }}</div>
      </div>
    </div>
    <div class="space"></div>
    <div class="section">
      <div class="good_bg" v-for="(item,index) in orderDetail.detailList" :key="index">
        <img :src="item.image" width="85" height="85" alt="">
        <div class="detail_bg">
          <div class="good_name">{{ item.name }}</div>
          <div>{{ item.productSkuName }}</div>
          <div>×{{ item.num }}</div>
          <div>￥{{ item.priceCount }}</div>
        </div>
      </div>
    </div>
    <div class="space"></div>
    <div class="section">
      <div class="line_bg">
        <div class="title">订单编号：</div>
        <div class="content">{{ orderDetail.identifier }}</div>
      </div>
      <div class="line_bg">
        <div class="title">供应商：</div>
        <div class="content">{{ orderDetail.gongyingName }}</div>
      </div>
      <div class="line_bg">
        <div class="title">下单时间：</div>
        <div class="content">{{ orderDetail.createTime }}</div>
      </div>
      <div class="line_bg">
        <div class="title">支付时间：</div>
        <div class="content">{{ orderDetail.payTime }}</div>
      </div>
      <div v-if="orderDetail.logicId == 0" class="line_bg">
        <div class="title">收货类型：</div>
        <div class="content">门店自提</div>
      </div>
      <div v-else class="line_bg">
        <div class="title">物流公司：</div>
        <div class="content">{{ orderDetail.logicRemark }}</div>
      </div>
      <div v-if="orderDetail.logicId == 0" class="line_bg">
        <div class="title">物流单号：</div>
        <div class="content">无</div>
      </div>
      <div v-else class="line_bg">
        <div class="title">物流单号：</div>
        <div class="content">{{ orderDetail.logicNo }}</div>
      </div>
      <div v-if="orderDetail.type == 31 && orderDetail.couponRecordYfId" class="content_bg">
        <div class="title">运费券：</div>
        <div class="content">已使用</div>
      </div>
      <div v-if="orderDetail.type == 31 && orderDetail.couponAmount" class="content_bg">
        <div class="title">优惠券：</div>
        <div class="content">{{ orderDetail.couponAmount }}</div>
      </div>
      <div class="line_bg">
        <div class="title">订单备注：</div>
        <div class="content">{{ orderDetail.remark }}</div>
      </div>
    </div>
    <div class="space"></div>
    <div class="section">
      <div class="amount_bg">
        <div style="display: flex;">
          <div style="color: black; font-weight: bold;">实付款：</div>
          <div v-if="orderDetail.scoreType" style="color: red; font-weight: bold;">¥{{ orderDetail.totalAmount }}+{{ orderDetail.payScore }}积分</div>
          <div v-else style="color: red; font-weight: bold;">¥{{ orderDetail.totalAmount }}</div>
        </div>
      </div>
    </div>
    <div class="space"></div>
    <div class="section">
      <el-steps direction="vertical" :active="1">
        <el-step :title="item.status" :description="item.context" v-for="(item,imdex) in logisticsList" :key="imdex"></el-step>
      </el-steps>
    </div>
  </div>
</template>

<script>
import { zcyxWXOrderDetail } from '@/api/zcyx'
import { queryLogInfo } from '@/api/mall'

export default {
  name: "WXOrderDetail",
  props: {

  },
  components: {

  },
  data() {
    return {
      orderDetail: {},
      address: '',
      topTitle: '',
      logisticsList: []
    }
  },
  computed: {

  },
  watch: {},
  methods: {
    getExpress() {
      if (this.orderDetail.logicNo && this.orderDetail.logicNo.length > 0) {
        queryLogInfo({id: this.$route.query.id}).then(res=>{
          if (res.data && res.data.length > 0) {
            this.logisticsList = res.data;
          }
        }).catch(err=>{
          console.log(err);
        })
      }
    }
  },
  created() {
    zcyxWXOrderDetail({
      id: this.$route.query.id,
      openId: this.$route.query.openId
    }).then(res => {
      this.orderDetail = res
      if (this.orderDetail.logicId == 0) { // 自提
        this.topTitle = "自提" + " " + this.orderDetail.caigouName + " " + this.orderDetail.caigouMobile
      } else {
        this.topTitle = this.orderDetail.receiveName + " " + this.orderDetail.receiveMobile
        this.address = "地址：" + 
        this.orderDetail.receiveProvinceName + 
        this.orderDetail.receiveCityName + 
        this.orderDetail.receiveDistrictName + 
        this.orderDetail.receiveAddress
      }
      
      this.getExpress()
    })
    .catch((err) => {
      console.log(err)
    })
  },
  mounted() {
    
  },
  beforeCreate() {}, // 生命周期 - 创建之前
  beforeMount() {}, // 生命周期 - 挂载之前
  beforeUpdate() {}, // 生命周期 - 更新之前
  updated() {}, // 生命周期 - 更新之后
  beforeDestroy() {}, // 生命周期 - 销毁之前
  destroyed() {}, // 生命周期 - 销毁完成
  activated() {}, // 如果页面有keep-alive缓存功能，这个函数会触发
}
</script>

<style lang='scss' scoped>

  .status_title {
    width: 100%;
    height: 60px;
    font-size: 30px;
    font-weight: bold;
    color: white;
    background-color: #DF0F0F;
    line-height: 60px;
    text-align: center;
  }
  .section {
    width: 100%;
    padding: 15px;
    box-sizing: border-box
  }

  .space {
    width: 100%;
    height: 15px;
    background-color: #F9F9F9;
  }

  .line_bg {
    display: flex;
    margin-top: 15px;

    .title {
      width: 70px;
    }

    .content {
      flex: 1;
    }

    &:nth-child(1) {
      margin-top: 0px;
    }
  }

  .content_bg {
    display: flex;
    margin-top: 15px;
    justify-content: space-between;

    &:nth-child(1) {
      margin-top: 0px;
    }
  }

  .content {
    font-weight: bold; 
    color: black;
  }

  .amount_bg {
    display: flex;
    flex-direction: row-reverse;
  }
  
  .good_bg {
    position: relative;
    display: flex;
    margin-top: 10px;

    &:nth-child(1) {
      margin-top: 0px;
    }

    .detail_bg {
      position: absolute;
      top: 0;
      right: 0;
      left: 90px;
      height: 0;
      text-align: right;

      .good_name {
        font-weight: bold; 
        color: black;
        @include ellipsis($line: 1);
      }
    }
  }
</style>